<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    li {
      list-style: none;
    }

    img {
      width: 100%;
    }

    .box {
      width: 610px;
      height: 700px;
      margin: 100px auto;
    }
    
    .box p {
      color: #3b3b3b;
      padding: 10px 10px 0 10px;
    }

    .box .pic {
      position: relative;
    }

    .box .pic::after {
      position: absolute;
      top: 50%;
      left: 50%;
      /* 这里如果使用translate居中的话，在hover时还要写一遍translate(-50%, -50%)，否则会被层叠掉 */
      /* 而且这里不应该单独写，应该和scale连写，否则也会被层叠 */
      /* transform: translate(-50%, -50%); */

      /* margin-top: -29px;
      margin-left: -29px; */

      content: '';
      width: 58px;
      height: 58px;
      background: url(./播放图标.png);
      opacity: 0;
      /* transform: scale(12); */
      /* 在不使用margin居中的情况下使用 */
      /* 下面的书写顺序无要求 */
      transform: translate(-50%, -50%) scale(12);
      transition: all .5s;
    }

    .box li:hover .pic::after {
      opacity: 1;
      /* transform: scale(1); */
      /* 如果上面使用的是translate居中的，则这里必须加translate居中，否则会被层叠掉 */
      transform: translate(-50%, -50%) scale(1);
    }
  </style>
</head>

<body>
  <div class="box">
    <ul>
      <li>
        <div class="pic">
          <img src="./风景图.jpg" alt="">
        </div>
        <p>活生国孔，学自身位不挟绪开全就未学为德都话，而令月云谷，何而吾婵尹仄，拿了上锐答份血勇杨是韦，子圣。</p>
      </li>
    </ul>
  </div>
</body>

</html>